<template>
  <div class="screenshot-toolbar">
    <!-- 标注工具 -->
    <div class="toolbar-section">
      <button
        v-for="tool in tools"
        :key="tool.type"
        :class="['tool-button', { active: currentTool === tool.type }]"
        :title="tool.label"
        @click="selectTool(tool.type)"
      >
        {{ tool.icon }}
      </button>
    </div>

    <!-- 分隔线 -->
    <div class="toolbar-divider"></div>

    <!-- 颜色选择 -->
    <div class="toolbar-section">
      <button
        v-for="color in colors"
        :key="color.value"
        :class="['color-button', { active: currentColor === color.value }]"
        :style="{ backgroundColor: color.value }"
        :title="color.label"
        @click="selectColor(color.value)"
      ></button>
    </div>

    <!-- 分隔线 -->
    <div class="toolbar-divider"></div>

    <!-- 操作按钮 -->
    <div class="toolbar-section">
      <button class="action-button" title="OCR 识别" @click="$emit('ocr')">
        🔍 OCR
      </button>
      <button class="action-button primary" title="保存 (Enter)" @click="$emit('save')">
        💾 保存
      </button>
      <button class="action-button success" title="复制" @click="$emit('copy')">
        📋 复制
      </button>
      <button class="action-button danger" title="取消 (ESC)" @click="$emit('cancel')">
        ❌ 取消
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { AnnotationType } from '@/types/screenshot'
import { COLORS } from '@/types/screenshot'

const currentTool = ref<AnnotationType | null>(null)
const currentColor = ref(COLORS.RED)

// 工具列表
const tools = [
  { type: 'rect' as AnnotationType, icon: '▭', label: '矩形' },
  { type: 'arrow' as AnnotationType, icon: '➜', label: '箭头' },
  { type: 'text' as AnnotationType, icon: 'A', label: '文字' },
  { type: 'pen' as AnnotationType, icon: '✎', label: '画笔' },
  { type: 'mosaic' as AnnotationType, icon: '▦', label: '马赛克' },
  { type: 'number' as AnnotationType, icon: '①', label: '序号' },
  { type: 'highlight' as AnnotationType, icon: '◧', label: '高亮' },
]

// 颜色列表
const colors = [
  { value: COLORS.RED, label: '红色' },
  { value: COLORS.BLUE, label: '蓝色' },
  { value: COLORS.GREEN, label: '绿色' },
  { value: COLORS.YELLOW, label: '黄色' },
  { value: COLORS.ORANGE, label: '橙色' },
  { value: COLORS.PURPLE, label: '紫色' },
  { value: COLORS.BLACK, label: '黑色' },
  { value: COLORS.WHITE, label: '白色' },
]

// 定义emits
const emit = defineEmits(['tool-select', 'save', 'copy', 'cancel', 'ocr'])

// 选择工具
const selectTool = (tool: AnnotationType) => {
  currentTool.value = currentTool.value === tool ? null : tool
  emit('tool-select', tool)
}

// 选择颜色
const selectColor = (color: string) => {
  currentColor.value = color
}
</script>

<style scoped>
.screenshot-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background-color: rgba(40, 40, 40, 0.95);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  user-select: none;
}

.toolbar-section {
  display: flex;
  align-items: center;
  gap: 6px;
}

.toolbar-divider {
  width: 1px;
  height: 24px;
  background-color: rgba(255, 255, 255, 0.2);
}

.tool-button {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.tool-button:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}

.tool-button.active {
  background-color: #00a8ff;
  border-color: #00a8ff;
}

.color-button {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s;
}

.color-button:hover {
  transform: scale(1.1);
  border-color: rgba(255, 255, 255, 0.5);
}

.color-button.active {
  border-color: white;
  box-shadow: 0 0 0 2px rgba(0, 168, 255, 0.5);
}

.action-button {
  padding: 6px 12px;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: white;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.action-button:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}

.action-button.primary {
  background-color: #00a8ff;
  border-color: #00a8ff;
}

.action-button.primary:hover {
  background-color: #0096e6;
}

.action-button.success {
  background-color: #00c853;
  border-color: #00c853;
}

.action-button.success:hover {
  background-color: #00b34a;
}

.action-button.danger {
  background-color: #f44336;
  border-color: #f44336;
}

.action-button.danger:hover {
  background-color: #d32f2f;
}
</style>

